import { Link } from "react-router-dom";

const Home = () => {
  return (
    <div className="container mx-auto px-4 py-8">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl text-white p-8 mb-12">
        <div className="max-w-2xl">
          <h1 className="text-4xl font-bold mb-4">定制您的理想家具</h1>
          <p className="text-xl mb-6">
            选择我们的高品质家具，享受个性化定制服务，打造属于您的完美家居空间。
          </p>
          <Link 
            to="/user/products" 
            className="bg-white text-blue-600 font-semibold py-3 px-6 rounded-lg hover:bg-gray-100 transition duration-300"
          >
            立即选购
          </Link>
        </div>
      </section>

      {/* Featured Products */}
      <section className="mb-12">
        <h2 className="text-3xl font-bold text-center mb-8">热门商品</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {[1, 2, 3].map((item) => (
            <div key={item} className="bg-white rounded-lg shadow-md overflow-hidden">
              <div className="bg-gray-200 h-48 flex items-center justify-center">
                <span className="text-gray-500">家具图片 {item}</span>
              </div>
              <div className="p-4">
                <h3 className="text-xl font-semibold mb-2">精选家具 {item}</h3>
                <p className="text-gray-600 mb-4">高品质材料制作，舒适耐用</p>
                <div className="flex justify-between items-center">
                  <span className="text-lg font-bold text-blue-600">¥{1200 + item * 300}</span>
                  <Link 
                    to={`/user/products/${item}`} 
                    className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300"
                  >
                    查看详情
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Company Introduction */}
      <section className="mb-12">
        <h2 className="text-3xl font-bold text-center mb-8">关于我们</h2>
        <div className="bg-white rounded-lg shadow-md p-8">
          <p className="text-gray-700 text-lg mb-4">
            我们是一家专注于高品质家具设计与制造的公司，拥有超过15年的行业经验。
            致力于为客户提供个性化定制服务，打造舒适、美观的家居环境。
          </p>
          <p className="text-gray-700 text-lg">
            我们的家具采用环保材料制作，结合现代设计理念与传统工艺，
            确保每一件产品都符合最高的质量标准。
          </p>
          <div className="mt-6 text-center">
            <Link 
              to="/user/about" 
              className="inline-block bg-blue-500 text-white font-semibold py-3 px-6 rounded-lg hover:bg-blue-600 transition duration-300"
            >
              了解更多
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Home;